

$(function(){
    //banner轮播
    // console.log(window.innerWidth);
    banner()
    function banner(){
        let count = 3
        let timer
        let pager=0
        timer=setTimeout(auto,3000)
        function auto(){
            pager++
            count++
            mobile()
        }
        function mobile(clear=false,seesaw,direction){
            if(clear){
                clearTimeout(timer)
            }
            if(direction){
                $(`.banner > section:nth-child(${seesaw})`).off('click',direction)
            }
            // $(`.banner > section:nth-child(1)`).off('click',pre)
            // $(`.banner > section:nth-child(2)`).off('click',next)
            let num = -1180 *count
            let left = num + (window.innerWidth - 1200)/ 2 - 8
            if(pager > 2){
                pager = 0
            }
            if(pager < 0){
                pager = 2
            }
            $(`.banner > ul > li:eq(${pager})`).addClass('active').siblings('li').removeClass('active')
            $(`.banner > div > img:eq(${count})`).addClass('active').siblings('img').removeClass('active')
            $('.banner > div').animate({marginLeft:left+'px'},500,function(){
                
                if(count >= 5){
                    count = 2
                    num = -1180 *count
                    left = num + (window.innerWidth - 1200)/ 2 - 8
                    $(`.banner > div > img:eq(${count})`).addClass('active').siblings('img').removeClass('active')
                    $('.banner > div').css({marginLeft:left+'px'})
                }
                if(count <= 1){
                    count = 4
                    num = -1180 *count
                    left = num + (window.innerWidth - 1200)/ 2 - 8
                    $(`.banner > div > img:eq(${count})`).addClass('active').siblings('img').removeClass('active')
                    $('.banner > div').css({marginLeft:left+'px'})
                }
                if(direction){
                    $(`.banner > section:nth-child(${seesaw})`).on('click',direction)
                }
                timer = setTimeout(auto,3000)
            })
        }
        //上下
        $('.banner > ul > li').each((index,item)=>{
            $(item).attr('data-id',index)
        })
        $('.banner > ul > li').click((evt)=>{
            if($('.banner > div').is(":animated")){
                return
            }
            const id = evt.target.dataset.id * 1
            let choose
            pager = evt.target.dataset.id
            $('.banner > ul > li').each((index,item)=>{
                if($(item).hasClass('active')){
                    choose = item.dataset.id * 1
                }
            })
            if(choose > id || choose === id){
                if(choose === id){
                    return
                }
                if((choose - id) === 2){
                    count = 5
                    num = -1180 *count
                    left = num + (window.innerWidth - 1200)/ 2 
                    $(`.banner > div > img:eq(${count})`).addClass('active').siblings('img').removeClass('active')
                    $('.banner > div').css({marginLeft:left+'px'}) 
                }
                count = count - (choose - id)
                mobile(true)
            }else{
                count = count + (id - choose)
                mobile(true)
            }
            // console.log(choose);
            // count = count + id
            // $('.banner > div')
        })
        function pre(){
            if($('.banner > div').is(":animated")){    //判断元素是否正处于动画状态
            //如果当前没有进行动画，则添加新动画
                return
            }
            count--
            pager--
            mobile(true,1,pre)
        }
        function next(){
            if($('.banner > div').is(":animated")){
                return
            }
            pager++
            count++
            mobile(true,2,next)
        }
        $('.banner > section:nth-child(2)').on('click',next)
        $('.banner > section:nth-child(1)').on('click',pre)
        
    }
    //tab区域
    tabs()
    spendAjax()
    $('.topic-right > ul > li').each((index,item)=>{
        $(item).attr({'data-id': index})
        $(item).click(function(){
            $(this).addClass('active').siblings('li').removeClass('active')
            spendAjax(item.dataset.id*1)
        })
    })
    
    function spendAjax(num=0,page=1,count1=1){
        $.ajax({
            type:'GET',
            url: "http://localhost:3000/tabs",
            data: `num=${num}&page=${page}`,
            success({data,count}){
                let str = ''
                // console.log(data);
                data.forEach((item,index)=>{
                    str += `
                    <li class="items">
                        <div>
                            <div>
                                <img src='http://pic.qyer.com/zt/3a7c/58a5/4d16/6935/0a32/07c4/f9bc/1f8b'>
                                <p>手机扫一扫&nbsp;查看WAP版</p>
                            </div>
                        </div>
                        <div>
                            <p>${item.title}</p>
                            <div></div>
                        </div>
                    </li>
                    `
                })
                $('.content').html(str)
                data.forEach((item,index)=>{
                    $(`.items:eq(${index}) > div:nth-child(1)`).css({backgroundImage: `url(http:${item['img-src']})`})
                })
                tabs()
                creatElement(count1,count)
            }
        })
    }
    
    function tabs(){
        $('.items').each((index,item)=>{
            $(item).on('mouseenter',(evt)=>{
                $(`.items:eq(${index}) > div:nth-child(1) > div`).fadeIn(200)
                $(`.items:eq(${index}) > div:nth-child(2) > div`).css({backgroundPosition: '0px -146px'})
            })
            $(item).on('mouseleave',(evt)=>{
                $(`.items:eq(${index}) > div:nth-child(1) > div`).fadeOut(200)
                $(`.items:eq(${index}) > div:nth-child(2) > div`).css({backgroundPosition: '-60px -146px'})
            })
        })
    }
    //pages区域
    pages()
    creatElement(1)
    function creatElement(num,page=10){
        let str = ''
        if(page==1){
            str = '<li class="active" data-num="1">1</li>'
        }else{
            if(num > 1){
                str += `<li class='pre'>上一页</li>`
            }
            for(let i = 1; i<page*1+1; i++){
                if(i == num){
                    str += `<li class='active' data-num="${i}">${i}</li>`
                }else{
                    str += `<li data-num="${i}">${i}</li>`
                }  
            }
            if(num != page){
                str += `<li class='next'>下一页</li>`
            }
        }
        
        $('.pages').html(str)
        pages()
    }
    function pages(){
        $('.pages > li').each(function(index,item){
            if(item.dataset.num){
                $(item).click(function(){
                    creatElement(this.dataset.num * 1)
                    let num = this.dataset.num * 1
                    $('.topic-right > ul > li').each((index,item)=>{
                        if($(item).is('.active')){
                            spendAjax(item.dataset.id*1,num,num)
                        }
                    })
                })
            }
        })
        $('.pages > .pre').click(function(){ 
            let count = 0
            let num1 = $('.pages > .active').get(0).dataset.num*1 - 1
            $('.pages > li').each((index,item)=>{
                if($(item).is('[data-num]')){
                    count +=1
                }
            })
            $('.topic-right > ul > li').each((index,item)=>{
                if($(item).is('.active')){
                    spendAjax(item.dataset.id*1,num1,num1)
                }
            })
            creatElement(num1,count)
        })
        $('.pages > .next').click(function(){
            let count = 0
            let num1 = $('.pages > .active').get(0).dataset.num*1 + 1
            $('.pages > li').each((index,item)=>{
                if($(item).is('[data-num]')){
                    count +=1
                }
            })
            
            $('.topic-right > ul > li').each((index,item)=>{
                if($(item).is('.active')){
                    spendAjax(item.dataset.id*1,num1,num1)
                }
            })
            creatElement(num1,count)
        })
    }
})
